<template>
    <div>
      <!-- 课程信息 -->
      <div class="course-info">
        <h2>课程详情 - {{ course.courseName }}</h2>
        <el-card header="课程信息">
          <div>
            <el-row>
              <el-col :span="6">课序号: {{ $route.params.courseId }}</el-col>
              <el-col :span="6">课程名:<span v-if="!editing">{{ course.courseName }}</span>
                <span v-else>
                 <el-input v-model="course.courseName"></el-input>
                </span>
              </el-col>
              <el-col :span="6">授课教师: {{ course.teacherName }}</el-col>
            </el-row>
          </div>
          <div class="course-description">
            <el-divider></el-divider>
            <h3>课程详细说明</h3>
            <p><span v-if="!editing">{{ course.profile }}</span>
              <span v-else>
                <el-input v-model="course.profile"></el-input>
              </span>
            </p>
          </div>
        </el-card>
      </div>

      <!-- 学生名单表格 -->
      <div class="student-list">
        <h2>学生名单</h2>
        <el-card>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="ID" prop="studentId"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="性别" prop="gender"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
          </el-table>
          <el-pagination
              background="true"
              layout="prev, pager, next"
              :total="total"
              v-model:currentPage="queryInfo.page"
              :page-size="queryInfo.size"
              @current-change="handlePageChange1"
          />
        </el-card>
      </div>
      <div class="homework-list">
      <h2>作业列表</h2>
      <el-card>
        <el-table :data="homeworkData" style="width: 100%">
          <el-table-column type="index" width="20" />
          <el-table-column prop="homeworkId" width="100" v-if="false"/>
          <el-table-column prop="homeworkName" label="作业名称" width="120" />
          <el-table-column prop="startTime" label="发布日期" width="160" />
          <el-table-column prop="endTime" label="截止日期" width="160"/>
          <el-table-column prop="hupingStartTime" label="互评开始日期" width="160" />
          <el-table-column prop="hupingEndTime" label="互评截止日期" width="160"/>
          <el-table-column prop="profile" v-if="false" />
          <el-table-column label="查看">
            <template v-slot="scope">
              <el-button @click="viewDetails(scope.row)" >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background="true"
            layout="prev, pager, next"
            :total="total"
            v-model:currentPage="queryInfo.page"
            :page-size="queryInfo.size"
            @current-change="handlePageChange2"
        />
      </el-card>
    </div>
    </div>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getStudent } from '@/api/student'
import { getInfo } from '@/api/info'
import { getHomework } from '@/api/getCourseHomework'

const route = useRoute()
const router = useRouter()
const total = ref(0)

const currentPage = ref(1)

const queryInfo = ref({
  courseId: route.params.courseId,
  page: currentPage,
  size: 5
})

const courseInfo = {
  courseId: route.params.courseId
}

const tableData = ref([])
const homeworkData = ref([])

const course = ref({
  courseId: '',
  courseName: '',
  teacherName: '',
  profile: ''
})

const editing = ref(false)

const getStudentList = async () => {
  const res = await getStudent(queryInfo.value)
  console.log(res)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const getHomeworkList = async () => {
  const res = await getHomework(queryInfo.value)
  console.log(res)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const getDetail = async () => {
  const res = await getInfo(courseInfo)
  course.value = res.data.data
  console.log(res)
}

const handlePageChange1 = () => {
  getStudentList()
}

const handlePageChange2 = () => {
  getHomeworkList()
}

const viewDetails = (row) => {
  console.log('查看详情', row)
  router.push({ name: 'HomeworkDetail', params: { homeworkId: row.homeworkId } })
}

onMounted(getDetail)
onMounted(getStudentList)
onMounted(getHomeworkList)
</script>

  <style scoped>
  .course-info {
    margin-bottom: 20px;
  }

  .course-info span {
    margin-right: 10px;
  }

  .course-description {
    margin-top: 10px;
  }

  .student-list {
    margin-top: 20px;
  }

  table {
    width: 100%;
  }

  th, td {
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
  }

  th {
    background-color: #f0f0f0;
  }
  </style>
